import {API, BlockTool, BlockToolConstructorOptions} from "@editorjs/editorjs";
import {makeElement} from "@/utils/lang/DocumentUtil";
import EncryptTextTool from "@/editor/SuperEditor/block/EncryptTextTool/components/EncryptTextTool.vue";
import {buildEncryptTextData, EncryptTextData} from "@/editor/SuperEditor/block/EncryptTextTool/types";


export default class EncryptText implements BlockTool {

  /**
   * Notify core that read-only mode is supported
   */
  public static readonly isReadOnlySupported = true

  static get toolbox(): { icon: string, title: string } {
    return {
      icon: '<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M466.752 939.776H175.808c-51.264 0-92.864-41.6-92.864-92.864V175.808c0-51.264 41.6-92.864 92.864-92.864h671.104c51.264 0 92.864 41.6 92.864 92.864v251.008a41.472 41.472 0 1 0 82.944 0V175.808c0-46.656-18.496-91.328-51.52-124.288A175.488 175.488 0 0 0 846.912 0H175.808A175.68 175.68 0 0 0 0 175.808v671.104a175.808 175.808 0 0 0 175.808 175.808h290.944a41.472 41.472 0 1 0 0-82.944z" fill="#454859"></path><path d="M821.184 309.824a41.472 41.472 0 0 0-41.472-41.472H242.944a41.472 41.472 0 1 0 0 82.944h536.768c22.912 0 41.472-18.56 41.472-41.472zM242.944 447.488a41.472 41.472 0 1 0 0 82.944h364.032a41.472 41.472 0 1 0 0-82.944H242.944zM466.88 626.624H242.944a41.472 41.472 0 1 0 0 82.944h223.872a41.472 41.472 0 0 0 0.064-82.944zM1018.048 734.528c-0.704-1.728-2.048-3.008-2.88-4.672a75.456 75.456 0 0 0-12.928-18.88c-1.856-1.92-4.224-3.2-6.336-4.928a72.512 72.512 0 0 0-16.576-11.008c-3.264-1.536-6.848-2.176-10.368-3.2-4.16-1.28-7.936-3.328-12.416-3.84v-27.136c0-6.656-1.088-13.056-1.984-19.456-0.064-1.216 0.32-2.368 0.128-3.52-0.192-1.152-0.64-2.304-0.832-3.52-0.512-2.688-1.216-5.248-1.856-7.936-0.832-3.456-1.344-6.976-2.496-10.496-0.576-1.728-1.664-3.072-2.24-4.736a145.408 145.408 0 0 0-10.752-22.784c-1.088-1.856-1.6-4.032-2.752-5.76-0.32-0.512-0.832-0.896-1.152-1.408-5.952-9.024-12.8-17.28-20.544-24.704-2.624-2.56-5.568-4.544-8.32-6.912a138.88 138.88 0 0 0-49.024-26.816c-3.456-1.088-6.72-2.368-10.304-3.2a145.28 145.28 0 0 0-33.216-4.16h-0.128c-11.456 0-22.464 1.664-33.216 4.16-3.52 0.832-6.848 2.112-10.304 3.2a141.056 141.056 0 0 0-49.024 26.816c-2.816 2.304-5.696 4.352-8.32 6.912a143.296 143.296 0 0 0-20.544 24.704c-0.32 0.512-0.832 0.896-1.152 1.408-1.152 1.792-1.664 3.968-2.752 5.76a137.408 137.408 0 0 0-10.752 22.784c-0.64 1.664-1.664 3.072-2.24 4.736-1.088 3.52-1.664 7.04-2.496 10.496-0.64 2.624-1.408 5.248-1.856 7.936-0.192 1.152-0.64 2.304-0.832 3.52-0.192 1.216 0.192 2.368 0.128 3.52-0.896 6.464-1.984 12.8-1.984 19.456v27.136c-4.48 0.576-8.256 2.624-12.416 3.84-3.52 1.088-7.04 1.728-10.368 3.2a74.688 74.688 0 0 0-16.576 11.008c-2.112 1.728-4.48 3.008-6.336 4.928a73.792 73.792 0 0 0-12.928 18.88c-0.896 1.664-2.24 2.944-2.944 4.672-3.712 8.896-5.952 18.56-5.952 28.8v184.64c0 41.92 34.56 76.032 77.184 76.032h271.424C989.44 1024 1024 989.888 1024 947.968v-184.64c0-10.24-2.24-19.904-5.952-28.8z m-282.688-73.728a74.88 74.88 0 0 1 8.064-32.512c3.264-6.784 7.424-12.992 12.48-18.496 0.896-0.96 1.6-2.176 2.56-3.072a76.8 76.8 0 0 1 20.928-14.144c1.792-0.832 3.584-1.472 5.44-2.176 8.192-3.072 16.832-5.248 26.112-5.312h0.256c9.28 0 17.92 2.24 26.112 5.312 1.856 0.704 3.648 1.344 5.44 2.176 7.744 3.584 14.912 8.256 20.928 14.144 0.96 0.896 1.664 2.112 2.56 3.072 5.056 5.44 9.216 11.712 12.48 18.496 0.896 1.792 1.792 3.52 2.56 5.44 3.264 8.448 5.504 17.472 5.504 27.072v26.56H735.36v-26.56z m225.472 278.592a25.536 25.536 0 0 1-25.92 25.024h-247.616a25.536 25.536 0 0 1-25.92-25.024v-169.024c0-13.824 11.648-25.024 25.92-25.024h247.616c14.272 0 25.92 11.2 25.92 25.024v169.024z" fill="#454859"></path></svg>',
      title: '加密文本',
    };
  }

  private readonly api: API;
  private readonly readOnly;
  public data: Ref<EncryptTextData>;
  public fs: Ref<boolean> = ref(false);

  private wrapper: HTMLDivElement | null = null;

  constructor(props: BlockToolConstructorOptions<EncryptTextData>) {
    const {api, readOnly, data} = props;
    this.api = api;
    this.readOnly = readOnly;
    if (!data || !Object.keys(data).length) {
      this.data = ref(buildEncryptTextData());
    } else {
      this.data = ref(data);
    }
  }

  render(): Promise<HTMLElement> | HTMLElement {
    if (!this.wrapper) {
      this.wrapper = makeElement('div');
    }

    const {data, readOnly, api} = this;

    const app = createApp({
      setup() {
        return () => <EncryptTextTool v-model={data.value} readOnly={readOnly} api={api}/>
      }
    });
    app.mount(this.wrapper);
    return this.wrapper;
  }

  save(): EncryptTextData {
    return toRaw(this.data.value);
  }


}